<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>让坦克开起来</title>
<style type="text/css">
	input{
        font-size:26px;
        margin-top: 20px;
        }
	body{
        background-image: url(images/grassland.png);
        }
	#mytank{
        position: absolute;
        left:10px;
        top:100px;
        }
</style>
</head>
<body>
    
	 <img id="mytank" src="images/right.png"/> 
	  
       <script> 
        /*189000526-谭静*/
            let a = document.querySelector('#mytank');
            a.style.top = 100 + 'px';
            a.style.left = 10 + 'px';
            window.onkeydown = function(e){
                switch(e.keyCode){
                        case 83: a.style.top = parseInt(a.style.top) + 50 + 'px'; 
                                a.src = "images/down.png";break;//下
                        case 87:a.style.top = parseInt(a.style.top) - 50 + 'px'; 
                                 a.src = "images/up.png";break;//上
                        case 65:a.style.left = parseInt(a.style.left) - 50 + 'px';
                                 a.src = "images/left.png";break;//左
                        case 68:a.style.left = parseInt(a.style.left) + 50 + 'px'; 
                                 a.src = "images/right.png";break;//右
                        default:return;
                }
            }

            window.document.oncontextmenu = ()=>false;
        //    window.addEventListener("contextmenu",function(e){
	//         e.preventDefault();
        //    });//在界面禁用鼠标右键

//             <div id="div1">
//         <button id="btn1" onclick="show()">测试按钮1</button>
//         <button id="btn2">测试按钮1</button>
//     </div>
//     <script>
         /*事件流 利用标签的属性进行事件注册  
                DOM0级：方法一：HTML内联属性
                        <a href='#' onclick="myfun()"></a>
                        方法二：纯JS
                        a.onclick=function(){
                                console.log("DOM0");
                        }
                        缺点：事件会发生覆盖
                        
                DOM2级（观察者模式）：事件监听注册*/
                        a.addEventListener('click',function(){
                                console.log("DOM2级");
                        });
//         e.stopPropagation();//阻止事件冒泡
//         preventDefault();//阻止事件的默认行为

//         //DOM2级：捕获阶段、处理阶段、冒泡阶段

//     </script>
        
       </script> 
</body>
</html>
